<!--
 * @Author: Haochen
 * @Date: 2021-12-08 14:59:49
 * @LastEditTime: 2021-12-11 14:10:08
 * @FilePath: \students-system\src\views\classes\AddClass.vue
-->
<template>
  <div>
    <h4>新增班级</h4>
    <select v-model="newClass.subjectsId">
      <option :value="undefined" disabled>请选择专业</option>
      <option
        v-for="subject in subjects"
        :key="subject._id"
        :value="subject._id"
      >
        {{ subject.name }}
      </option>
    </select>
    &nbsp;
    <input type="text" v-model.lazy="newClass.name" /> &nbsp;
    <button @click="addNewClass">确认新增</button><br />
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';

const { mapActions: subjectsActions, mapState: subjectsState } =
  createNamespacedHelpers('subjects');

export default {
  data() {
    return {
      newClass: {},
    };
  },

  computed: {
    ...subjectsState({
      subjects: 'rows',
    }),
  },
  created() {
    this.getSubjectsAsync();
  },
  methods: {
    ...subjectsActions(['getSubjectsAsync']),

    async addNewClass() {
      const { data: res } = await this.$api.classes.addNewClass(this.newClass);
      if (res.code) {
        alert(res.message);

        this.newClass = {};
      }
    },
  },
};
</script>

<style></style>
